<template>
  <div>
    <!-- 卡片头部 -->
    <v-card-title primary-title>
      <v-btn color="info" @click="clear()">刷新</v-btn>
      <v-btn color="primary" @click="addBrand">新增品牌</v-btn>
      <!--空间隔离组件-->
      <v-spacer/>
      <v-text-field
        label="请输入关键字搜索"
        v-model="search"
        append-icon="search" hide-details></v-text-field>
    </v-card-title>
    <!--弹出的对话框-->
    <v-dialog max-width="500" v-model="show" persistent>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit?'修改':'新增'}}品牌</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow()">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
          <my-brand-form ref="child" @close="closeWindow()" :isEdit="isEdit" :oldBrand="oldBrand"></my-brand-form>
        </v-card-text>
      </v-card>
    </v-dialog>
    <!-- 分割线 -->
    <v-divider/>
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center"><img :src="props.item.image"></td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="justify-center layout">
          <v-btn color="info" @click="editBrand(props.item)">修改</v-btn>
          <v-btn color="warning" @click="deleteBrand(props.item.id)">删除</v-btn>
        </td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
  // 导入自定义的表单组件
  import MyBrandForm from './MyBrandForm'

  export default {
    name: "my-brand",
    components: {MyBrandForm},
    comments: {
      MyBrandForm
    },
    data() {
      return {
        search: '', // 搜索过滤字段
        totalBrands: 0, // 总条数
        brands: [], // 当前页品牌数据
        loading: true, // 是否在加载中
        pagination: {}, // 分页信息
        headers: [
          {text: 'id', align: 'center', value: 'id'},
          {text: '名称', align: 'center', sortable: false, value: 'name'},
          {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter', sortable: true,},
          {text: '操作', align: 'center', value: 'id', sortable: false}
        ],
        show: false, //控制对话框显示,
        oldBrand: {},//即将被编辑的品牌数据
        isEdit:false//是否编辑
      }
    },
    mounted() { // 渲染后执行
      // 查询数据
      this.getDataFromServer();
    },
    watch: {
      pagination: { // 监视pagination属性的变化
        deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
        handler() {
          // 变化后的回调函数，这里我们再次调用getDataFromServer即可
          this.getDataFromServer();
        }
      },
      search: { // 监视搜索字段
        handler() {
          this.getDataFromServer();
        }
      }
    },
    methods: {
      getDataFromServer() { // 从服务的加载数的方法。
        this.$http.get("/item/brand/page", {
          params: {
            key: this.search,//搜索条件
            page: this.pagination.page,//当前页
            rows: this.pagination.rowsPerPage,//每页大小
            sortBy: this.pagination.sortBy,//排序字段
            desc: this.pagination.descending//是否降序
          }
        }).then(resp => {
          //得到的数据赋值给本地属性
          this.brands = resp.data.items;
          this.totalBrands = resp.data.total;
          //完成赋值后，加载状态改为false
          this.loading = false;
        });


      },
      addBrand() {

        //新增窗口时，把原数据清零
        this.oldBrand=null;
        //是否编辑
        this.isEdit=false;
        // 控制弹窗可见：
        this.show = true;

      },
      deleteBrand(bid){
        this.$http.delete("/item/brand/delete",{params:{bid:bid}}).then(()=>{
          this.getDataFromServer();
          this.$message.success("删除成功")
        }).catch(() => {
          this.$message.error("删除失败")
        });

      },
      editBrand(oldBrand){
        // 根据品牌信息查询商品分类,回显分类信息
        this.$http.get("/item/category/bid/" + oldBrand.id)
          .then(({data}) => {
            //获取编辑前为true
            this.isEdit=true;
            // 获取要编辑的brand
            this.oldBrand = oldBrand;
            // 回显商品分类
            this.oldBrand.categories = data;
            // 控制弹窗可见：
            this.show = true;
          })
      },
      closeWindow() {
        this.show = false;
      },
      clear() {
        this.getDataFromServer();
      }
    }
  }
</script>


<style scoped>

</style>
